<template>
  <div>
    <div class="search-box" id="box1" >
      <input @keyup.enter="myTranslate"
             v-model="translateKey"
             @mousedown="moveTranslateBox($event)"
             type="text" class="search" :placeholder="this.$t('workDisplay.translateAndBaike.translatePlaceholder')">
      <div class="search-result-box">
        <div class="search-result-list" v-if="translateValue != '' && translateKey !=''"  v-for="(item,index) in translateValue" :key="index">【{{index+1}}】{{item}}</div>
        <div class="search-result-list" v-else-if="translateValue == '' && translateKey !=''">
          {{$t('workDisplay.replay.nothing')}}
        </div>
        <div v-if="loading">
          <el-table
            v-loading="loading"
            style="width: 100%;"></el-table>
        </div>
      </div>
    </div>
    <div class="baike-box" id="box2">
      <input @keyup.enter="myBaike"
             v-model="baikeKey"
             @mousedown="moveBaikeBox($event)"
             type="text" class="baike" :placeholder="this.$t('workDisplay.translateAndBaike.baikePlaceholder')">
      <div class="baike-result-box">
        <div v-if="baikeValue != 'null' && baikeKey !=''" class="baike-result-list">{{baikeValue == ''? $t('workDisplay.translateAndBaike.nothing') : baikeValue}}</div>
      </div>
      <div v-if="loading">
        <el-table
          v-loading="loading"
          style="width: 100%;"></el-table>
      </div>

    </div>
    <a href="javascript:;"><div class="changeButton" @click="changeFunction">{{tips}}</div></a>
  </div>
</template>

<script>
    let counter = 1;
    export default {
        name: "TranslateAndBaike",
        data(){
            return{
                translateValue:'',
                translateKey:'',
                baikeKey:'',
                baikeValue:'',
                translate:"翻译",
                baike:"百科",
                tips:'翻译',
                loading: false,
                baseURL:'http://localhost:8000/translate/',
                baseURL2:'http://localhost:8000/baike/',
            }
        },
        watch:{
            translateKey:{
                handler(){
                    this.translateValue = ''
                    this.loading = false
                },
            },
            baikeKey:{
                handler(){
                    this.baikeValue = "null"
                    this.loading = false
                },
            }
        },
        methods:{
            myTranslate(){
                this.loading = true
                this.translateValue = ""
                this.axios.get(this.baseURL + this.translateKey + "/").then(res=>{
                    this.translateValue = res.data.substring(0,res.data.length-2).split("|")
                    this.loading = false
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            myBaike(){
                this.loading = true
                this.baikeValue = "null"
                this.axios.get(this.baseURL2 + this.baikeKey + "/").then(res=>{
                    this.baikeValue = res.data
                    this.loading = false
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            moveTranslateBox(event){
                let box1 = document.getElementById("box1")
                let ol = event.clientX - box1.offsetLeft
                let ot = event.clientY - box1.offsetTop
                document.onmousemove = function(event){
                    let left = event.clientX - ol
                    let top = event.clientY - ot

                    box1.style.left = left + "px"
                    box1.style.top = top + "px"
                }
                document.onmouseup = function(){
                    document.onmousemove = null
                    document.onmouseup = null
                }
                // Ctrl+A全选页面，然后拖动Div，会导致异常
                return false
            },
            moveBaikeBox(event){
                let box2 = document.getElementById("box2")
                let ol = event.clientX - box2.offsetLeft
                let ot = event.clientY - box2.offsetTop
                document.onmousemove = function(event){
                    let left = event.clientX - ol
                    let top = event.clientY - ot

                    box2.style.left = left + "px"
                    box2.style.top = top + "px"
                }
                document.onmouseup = function(){
                    document.onmousemove = null
                    document.onmouseup = null
                }
                // Ctrl+A全选页面，然后拖动Div，会导致异常
                return false
            },

            changeFunction(){
                if (counter % 3 == 0) {
                    document.getElementById("box1").style.display="none"
                    document.getElementById("box2").style.display="none"
                }else if (counter % 2 == 1) {
                    this.tips = this.translate
                    document.getElementById("box1").style.display="block"
                    document.getElementById("box2").style.display="none"
                } else {
                    this.tips = this.baike
                    document.getElementById("box2").style.display="block"
                    document.getElementById("box1").style.display="none"
                }
                counter++
            }
        }
    }
</script>

<style scoped>
  .search-box{
    width: 450px;
    min-height: 0px;
    padding: 8px 10px;
    padding-right: 0px;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 20px rgb(175, 175, 175);
    position: fixed;
    top: 10px;
    right:10px;
    display: none;

    z-index: 999;
  }
  .search{
    width: 93%;
    height: 32px;
    padding: 0px 10px;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    color: rgb(59, 59, 59);
    border: 1px solid rgb(0, 157, 98);
    /* margin-bottom: 2px; */
    transition: 0.2s;
  }
  .search:hover{
    background-color: rgba(238, 238, 238, 0.89);
    border: 1px solid transparent;
  }
  input::placeholder{
    font-weight: lighter;
    font-size: 14px;
  }

  .search-result-list{
    width: 93.5%;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: rgb(42, 42, 42);
    border-radius: 5px;
    padding: 0px 10px;
    /*background-color: aliceblue;*/
    background-color: rgba(0, 157, 98, 0.1);
    margin-top: 2px;
    transition: 0.2s;

    /* 文字溢出处理 */
    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }
  .search-result-list:hover{
    /*background-color: rgb(226, 242, 255);*/
    background-color: rgba(0, 157, 98, 0.18);
  }


  .baike-box{
    width: 450px;
    min-height: 0px;
    padding: 8px 10px;
    padding-right: 0px;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 20px rgb(175, 175, 175);
    position: fixed;
    top: 10px;
    right:10px;
    display: none;
    z-index: 999;
  }
  .baike{
    width: 93%;
    height: 32px;
    padding: 0px 10px;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    color: rgb(59, 59, 59);
    /*border: 1px solid rgb(0, 173, 196);*/
    border: 1px solid rgb(0, 157, 98);
    /* margin-bottom: 2px; */
    transition: 0.2s;
  }
  .baike:hover{
    background-color: rgba(238, 238, 238, 0.89);
    border: 1px solid transparent;
  }
  input::placeholder{
    font-weight: lighter;
    font-size: 14px;
  }
  .baike-result-list{
    width: 93.5%;
    min-height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: rgb(42, 42, 42);
    border-radius: 5px;
    padding: 0px 10px;
    /*background-color: aliceblue;*/
    background-color: rgba(0, 157, 98, 0.1);
    margin-top: 2px;
    transition: 0.2s;
  }
  .baike-result-list:hover{
    /*background-color: rgb(226, 242, 255);*/
    background-color: rgba(0, 157, 98, 0.18);
  }


  .changeButton{
    width: 38px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 2px;
    background-color: rgb(164, 164, 164);
    border: 1px solid rgba(255, 255, 255, 0);
    color: #eff3f5;
    position: fixed;
    bottom: 110px;
    right: 5px;

    z-index: 999;
  }
  .changeButton:hover{
    background-color: rgb(75, 75, 75);
  }
  .changeButton:active{
    background-color: rgb(104, 104, 104);
  }
</style>
